<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆</title>
	<%-- <script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/jquery-3.5.1.js"></script>
	<script type="text/javascript">
		function u(){
			$.ajax({
				url:"${pageContext.request.contextPath }/jsUsername",
				data:{"username":$("#us").val()},
				success:function (data){
					if("yes"==data){
						$("#s").html("用户名正确");
					}else{
						$("#s").html("用户名错误");
					} 
					//alert(data);
				}
			})
		}

		function changeCode(){
			var src="${pageContext.request.contextPath }/getVerifyCode?"+new Date().getTime();
			$('.verifyCode').attr("src",src);
		}



		
		//选中记住密码触发事件，如果选中就赋值为1 ，否则赋值为0
        function remember(){
            var remFlag = $("input:checkbox").is(':checked');
            if(remFlag){ 
                //cookie存用户名和密码,回显的是真实的用户名和密码,存在安全问题.
                var conFlag = confirm("记录密码功能不宜在公共场所使用,以防密码泄露.您确定要使用此功能吗?");
                if(conFlag){ 
                    //确认标志
                    $("#rememberMe").val("1");
                }else{
                    $("input:checkbox").removeAttr('checked');
                    $("#rememberMe").val("0");
                }
            }else{ 
                //如果没选中设置remFlag为""
                $("#rememberMe").val("0");
            }
        }
//启动函数来获取cookie中保存的用户信息
 $(function(){
　　　　　　　//cookie数据保存格式是key=value;key=value;形式，loginInfo为保存在cookie中的key值，具体看controller代码
            var str = getCookie("loginInfo");
            str = str.substring(1,str.length-1);
            var username = str.split(",")[0];
            var password = str.split(",")[1];
            //自动填充用户名和密码
            $("#username").val(username);
            $("#password").val(password);
});
　　　　 //获取cookie
        function getCookie(cname) {
             var name = cname + "=";
            var ca = document.cookie.split(';');
            for(var i=0; i<ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0)==' ') c = c.substring(1);
                if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
            }
            return "";
        }
	</script>
</head>
<body>
	<a href="${pageContext.request.contextPath }/">去开始页面</a>
	<form action="${pageContext.request.contextPath }/login" method="get">
		<div>
			<input id="us" type="text" name="username" onblur="u()" required="required" placeholder="请输入用户名"><span id="s" style="color: red">${msg }</span>
		</div>
		<div>
			<input type="password" name="password" Oninput="value=value.replace(/[^\d]/g,'')" 
				required="required" placeholder="请输入密码"><span style="color: red">${msg1 }</span>
		</div>
		<div>
			<input class="verifyInput"  name="verifyInput" placeholder="请输入验证码"><span style="color: red">${msg2 }</span>
				<img class="verifyCode" onclick="changeCode()" src="${pageContext.request.contextPath }/getVerifyCode">
		</div>
		<!-- <div>
			<label class="checkbox">
     			<input type="checkbox" name="rememberMe" id="rememberMe" onclick="remember();"/> 记住密码
			</label>
		</div> -->
		<input type="submit" value="登录"> 
	</form> --%>
</head>
<body>
	<a href="${pageContext.request.contextPath }/">去开始页面</a>
	<form action="${pageContext.request.contextPath }/login" method="get">
		<div>
			<input type="text" name="username" required="required" value="${root.username }" placeholder="请输入用户名"><span style="color: red">${msg }</span>
		</div>
		<div>
			<input type="password" name="password" value="${root.password }" required="required" placeholder="请输入密码"><span style="color: red">${msg2 }</span>
		</div>
		<input type="submit" value="登录"> 
	</form>
</body>
</html>